<template>

<div class="xdq-login" >

<div class="xdq-login-title">
    云染数据
</div>

<van-form>
  <van-cell-group inset>
    <van-field
      v-model="loginUser.u_id"
      label="账号"
      placeholder="请填写账号"
      :rules="[{ required: true, message: '请填写账号！' }]"
    />
    <van-field
      v-model="loginUser.u_pwd"
      type="password"
      label="密码"
      placeholder="请填写密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" @click="login" >
      登录
    </van-button>
  </div>
</van-form>

<!-- <div class="xdq-to-register">没有账号？<van-button plain hairline type="default"  size="mini" to="register">请注册</van-button></div> -->
<div style="flex:auto;"></div>
<div>   
	<div style="color:#999999;text-align: center; width: 100%;font-size: 0.14rem;margin-bottom:0.05rem ;">【智链 · 云染数据】让教育享受科技的乐趣</div>
	<div style="color:#BBBBBB;text-align: center; width: 100%; font-size: 0.1rem;margin-bottom:0.1rem;">Copyright &copy; 2000-2030 文都智链信息技术有限公司</div>
</div>
</div>

</template>

<script setup>

import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {post,tip,setLocalToken} from '@/common'

const router = useRouter();//获取路由器

const loginUser = reactive({u_id:'',u_pwd:''});

const login = ()=>{
    //向服务端发出post请求
    post("/security/login",loginUser).then(result=>{

        //从回送结果中取出令牌，并将令牌存于客户端
        setLocalToken(result.data);
        tip.success('登录成功！');
        router.push({path:'/home'});
       
    });
};

</script>


<style scoped>

.xdq-login{
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    display:flex;
    flex-direction: column;
    align-items: center;

}
.xdq-login-title{
    color:#388adb;
    font-weight:bold;
    text-shadow: 5px 10px 10px #388adb;
    padding:5% 0px 4%;
    text-align: center;
    font-size:0.5rem;
    margin:15% 0px 15% 0px;
}
.xdq-to-register{
    font-size:0.14rem;
    margin-top:5%;
    color:#AAAAAA;
    display:flex;
    justify-content: center;
}

</style>
